<template>
    <div class="page-wrapper">
      <!-- 顶部导航 -->
      <PageTools :show-before="true">
      <template #before>
      一共{{total}}名员工
      </template>

      <template #after>
        <el-button type="primary" size="small" @click="isShowDialog=true">新增</el-button>
        <el-button type="success" size="small" @click="$router.push('/employees/import')">导入</el-button>
        <el-button type="warning" size="small" @click="export2Excel">导出</el-button>
      </template>
      </PageTools>


        <!-- 放置表格和分页 -->
        <el-card>
        <el-table :data="list" border="">
          <el-table-column label="序号" sortable="" type="index" />
          <el-table-column label="姓名" sortable="" prop="username"/>
          <el-table-column label="工号" sortable="" prop="workNumber"/>
          <el-table-column label="聘用形式" sortable="" prop="formOfEmployment"
          :formatter="formatEmployment"/>
          <el-table-column label="部门" sortable="" prop="departmentName"/>
          <el-table-column label="入职时间" sortable="" prop="timeOfEntry">
            <template v-slot="scope">
              <!-- {{scope.row.timeOfEntry}} -->
              <!-- {{旧数据｜过滤器}} -->
              {{scope.row.timeOfEntry | formatDate}}
            </template>

            </el-table-column>
          <el-table-column label="账户状态" sortable="">
            <template v-slot="scope">
              <el-switch
              v-model="scope.row.enableState"
              disabled
              :active-value="1">
            
              </el-switch>

            </template>
            </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template v-slot="scope">
              <el-button type="text" size="small" @click="$router.push(`/employees/detail/${scope.row.id}`)">查看</el-button>
              <el-button type="text" size="small" @click="showRoleDialog(scope.row.id)">角色</el-button>
              <el-button type="text" size="small" @click="delEmployee(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination layout="prev, pager, next"
          :total="total" 
          :page-size="pageConfig.size"
          @current-change="currentChange"/>
        </el-row>
      </el-card>

      <!-- 附加弹窗 -->
      <EmployeeDialog :is-show-dialog="isShowDialog"/>
      <AssignRole :is-show-dialog="isShowRoleDialog" ref="roleForm" @closeDialog="isShowRoleDialog=false" />
    </div>
  </template>
  
  <script>
  // import PageTools from '@/components/PageTools/index.vue'
  import { getEmployee,delEmployee } from '@/api/employees'
  import EmployeeEnum from '@/constant/employees'
import {export_json_to_excel } from '@/vendor/Export2Excel'
// 导出时需要处理时间, 但是可惜过滤器没法在 js 部分使用
// 可以直接引入注册过滤器时用到的那个函数, 直接使用
import { formatDate } from '@/filters'

import EmployeeDialog from './components/employee-dialog.vue'
import AssignRole from './components/asssign-role.vue'

import {getUserDetailById} from '@/api/user'
  export default {
    // 去全局注册组件
    components:{
      // PageTools
      EmployeeDialog,
      AssignRole
    },
data(){
  return{
    list:[],
    pageConfig:{
      page:1,
      size:5
    },
    total: 0,
    isShowDialog:false,
    isShowRoleDialog:false
  }
},
    created() {
    this.loadList()
  },
  methods: {
    async loadList() {
      const res = await getEmployee(this.pageConfig)
      console.log('员工数据', res)
      this.list=res.rows
      console.log(this.list)
      // 分页
      this.total=res.total
      console.log(this.list)
    },

    // 切换页码重写渲染
    currentChange(newPage){
      // 这里是用户点击分页触发
      // 要拿到当前最新页码交给页面配置
      this.pageConfig.page=newPage
      this.loadList()
    },

    // 格式化聘用形式
    // 这个函数被赋值给列的formatter属性
    // 他的返回值会覆盖原来的内容
    formatEmployment(row,col,cell){
      // row:行，col:列，cell:格子,index:索引  按顺序传参
      // 这个函数默认接收几个参数
      // console.log('当前数据',cell)
      // if(+cell===1){
      //   return '正式工'
      // }
      // if(+cell===2){
      // return '临时工'
      // }

      // 除了if判断，还能用一个数组储存所有的选项
      const hireType=[
        {id:1,value:'正式工'},
        {id:2,value:'临时工'},
        
      ]

      // 每次渲染，查找即可
      let res=''
hireType.forEach(item=>{
        if(Number(item.id) === Number(cell)){
          res=item.value
        }
      })
      return res
    },

    // 导出
    async export2Excel(){
      console.log('点击了导出按钮')
      const res= await getEmployee({
        page:1,
        size:this.total
      })
      console.log('所有员工数据',res.rows)
        

// 改造数据 表头不固定, 根据需求来即可
const header = ['工号', '姓名', '手机号', '聘用形式', '入职时间']
      // 改造数据, 行数据在一个二维数组中, 顺序跟着需要的表头来即可
      const data = res.rows.map(item => {
        // 数组套对象 => 数组套数组
        const user = []
        user.push(item.workNumber)
        user.push(item.username)
        user.push(item.mobile)
        // user.push(item.formOfEmployment)
         // 聘用形式不能显示数字, 而是需要通过枚举数据找到的对应的数据显示
         let str = ''
        EmployeeEnum.hireType.forEach(el => {
        // 避免一些是字符串一些是数字, 全部转成数字再判断
          console.log(el)
          console.log(item.formOfEmployment)
          if (Number(el.id) === Number(item.formOfEmployment)) {
            str = el.value
          }
        })
        user.push(str)
      
         // 独立处理入职时间, 引入格式化日期的函数
         user.push(formatDate(item.timeOfEntry))
        return user
      })
      console.log(header)
      console.log(data)

      export_json_to_excel({
        // header是表头数组
        // header: ['姓名', '工号', '手机'],
        // // data是行数据数组, 里面嵌套的每个元素都是下一层数组组成一行行数据
        // data: [
        //   ['小明', 1001, '13438488889'],
        //   ['小红', 1002, '13448488889'],
        //   ['小刚', 1003, '13458488889'],
        //   ['小霞', 1004, '13468488889'],
        // ]
      
        header,
        data
      })
      
  },


  // 删除
  async delEmployee(id) {
      console.log('删除', id)
      // 二次询问
      await this.$confirm('是否确认删除')
      // 发请求
      await delEmployee(id)
      // 提醒用户
      this.$message.success('操作成功')
      // 额外可选, 如果当前页面只剩下最后一条数据,
      // 当前页码不再第一页, 可以往前翻一页
      if (this.pageConfig.page > 1 && this.list.length === 1) {
        this.pageConfig.page--
      }
      // 更新页面
      this.loadList()
    },

    // -----------------------------------
    // 角色
    async showRoleDialog(userId) {
      const res = await getUserDetailById(userId)
      console.log('修改员工的数据', res)
      console.log('其中员工旧角色列表', res.roleIds)
      this.$refs.roleForm.id = userId
      this.$refs.roleForm.checkList = res.roleIds
      // 点击弹出修改员工角色弹窗
      // 另外其实点击哪个员工, 就要把他原来角色
      // 显示在子组件的 checkList 里面
      this.isShowRoleDialog=true
    }
}
  }
  </script>
  
  <style>
  
  </style>